<template>
	<div class="head-image" @click="handleClick">
		<img class="avatar-image" v-show="url" :src="url" 
			:style="avatarImageStyle" loading="lazy" />
		<div class="avatar-text" v-show="!url" :style="avatarTextStyle">
			{{name.substring(0,2).toUpperCase()}}</div>
		<!-- <el-tag  class="online3" type="danger" v-show="isOwner" size="mini" effect="dark">群主</el-tag> -->
		<!-- <el-tag  class="online3" type="warning" v-show="!isOwner && isAdmin" size="mini" effect="dark">群管</el-tag> -->
		<el-tag  class="online2" v-if="temporary" size="mini" effect="dark">临</el-tag>
		<div v-show="online" class="online" title="用户当前在线"></div>
		
		<slot></slot>
	</div>
</template>

<script>
import groupPermission from '@/utils/groupPermission';

	export default {
		name: "headImage",
		data() {
			return {
				// colors:["#7dd24b","#c7515a","#db68ef","#15d29b","#85029b",
				// "#c9b455","#fb2609","#bda818","#af0831","#326eb6"]
				colors: ["#5daa31", "#c7515a", "#e03697",  "#85029b",
					"#c9b455",  "#326eb6"]
			}
		},
		props: {
			id: {
				type: [String, Number],
				default: ''
			},
			size: {
				type: Number,
				default: 50
			},
			width: {
				type: Number
			},
			height: {
				type: Number
			},
			
			radius: {
				type: String,
				default: "50%"
			},
			url: {
				type: String
			},
			name: {
				type: String,
				default: "?"
			},
			online: {
				type: Boolean,
				default: false
			},
			isOwner: {
				type: Boolean,
				default: false
			},
			isGroupMember: { // 是否是群成员头像
				type: Boolean,
				default: false
			},
			isAdmin: { // 是否是管理员
				type: Boolean,
				default: false
			},
			member: {
				type: Object,
				default:() => ({})
			},
			temporary:{
                type:Boolean,
			},
			group: {
				type: Object,
				default: () => ({})
			}
		},
		methods:{
			handleClick(e){
				if (!this.isGroupMember) {
					this.$emit('click', e)
					return
				}
				// 获取当前群组信息
				const currentUserId = this.$store.state.userStore.userInfo.id;
				// 判断是否点击自己的头像
				if (String(this.id) == String(currentUserId)) {
					this.$message.warning('不能查看自己的信息');
					return;
				}

				// 从 store 中获取当前聊天的群组信息
				const activeGroup = this.group;
				
				// 如果没有当前聊天的群组信息，提示错误
				if (!activeGroup) {
					this.$message.error('获取群组信息失败，请重试');
					return;
				}

				// 判断当前用户的权限
				const isOwner = String(currentUserId) == String(activeGroup.ownerId);
				// 从群成员列表中找到当前用户
				const currentMember = activeGroup.groupMembers?.find(m => String(m.userId) == String(currentUserId));
				// 判断当前用户是否是管理员
				const isAdmin = currentMember?.isAdmin == 'Y';

				// 如果不是群主或管理员，不允许查看成员信息
				if (!isOwner && !isAdmin) {
					this.$message.info('暂无权限查看，仅群主和管理员可查看成员信息');
					return;
				}

				const rect = e.target.getBoundingClientRect();
				const pos = {
					x: rect.left,
					y: rect.top + (rect.height / 2)
				};

				// 获取成员信息
				let memberInfo = this.member;
				
				// 如果没有 member 属性或 userId，尝试从当前群组成员列表中获取
				if (!memberInfo || !memberInfo.userId) {
					memberInfo = activeGroup.groupMembers?.find(m => String(m.userId) == String(this.id));
					if (!memberInfo) {
						this.$message.error('该成员信息不存在或已退出群聊');
						return;
					}
				}

				// 检查是否是好友
				const isFriend = this.$store.state.friendStore.friends.find(f => String(f.id) == String(this.id));
				if (!isFriend) {
						this.$message.warning('你们之间不是好友关系，无法查看对方信息');
						return;
					}
				// 构建基础用户数据
				let baseUserData = {
					userId: this.id,
					userName: memberInfo.userName,
					nickName: memberInfo.showNickName || memberInfo.nickName,
					headImage: memberInfo.headImage,
					sex: memberInfo.sex || 0,
					signature: memberInfo.signature || '',
					fromGroup: true,
					prohibition: memberInfo.prohibition || 'N',
					isAdmin: memberInfo.isAdmin == 'Y',
					isOwner: String(activeGroup.ownerId) == String(this.id),
					groupId: activeGroup.id
				};

				if (isFriend) {
					// 如果是好友，获取详细信息
					this.$http({
						url: `/user/find/${this.id}`,
						method: 'get'
					}).then((user) => {
						baseUserData.userName = user.userName;
						const userData = {
							...user,
							...baseUserData
						};
						this.$store.commit("setUserInfoBoxPos", pos);
						this.$store.commit("showUserInfoBox", userData);
					}).catch(() => {
						console.log('111');
						// 如果获取详细信息失败，使用基础信息
						this.$store.commit("setUserInfoBoxPos", pos);
						this.$store.commit("showUserInfoBox", baseUserData);
					});
				} else {
					// 如果不是好友，直接使用群成员信息
					this.$store.commit("setUserInfoBoxPos", pos);
					this.$store.commit("showUserInfoBox", baseUserData);
				}
			}
		},
		
		computed:{
			
				avatarImageStyle() {
					let w = this.width ? this.width : this.size;
					let h = this.height ? this.height : this.size;
					return `width:${w}px; height:${h}px;
						border-radius: ${this.radius};`
				},
				avatarTextStyle() {
					let w = this.width ? this.width : this.size;
					let h = this.height ? this.height : this.size;
					//color:${this.textColor};font-size:${w*0.6}px;
					return `width: ${w}px;height:${h}px;
						background-color:${this.textColor};
						font-size:${w*0.35}px;
						border-radius: ${this.radius};`
				},
				textColor(){
					let hash = 0;
					for (var i = 0; i< this.name.length; i++) {
						hash += this.name.charCodeAt(i);
					}
					return this.colors[hash%this.colors.length];
				}
		}	
	}
</script>

<style scoped lang="scss">
	.head-image {
		position: relative;
		cursor: pointer;
		.avatar-image {
			position: relative;
			overflow: hidden;
			display: block;
			border: 1px solid #eee;
		}
		
		.avatar-text{
			//background-color: #f2f2f2; /* 默认背景色 */
			//border-radius: 15%; /* 圆果 */
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		} 
		.cover-view {
			position: absolute;
			right: -10%;
			top: -5rpx;
			width: 68rpx;
			height: 32rpx;
			z-index: 20;
		}
		.online{
			position: absolute;
			right: -5px;
			bottom: 0;
			width: 12px;
			height: 12px;
			background: limegreen;
			border-radius: 50%;
			border: 3px solid white;
		}
		.online2{
			position: absolute;
			//right: 0px;
			top: -10px;
			left: -10px;
			bottom: 0;
			width: 25px;
			height: 25px;
			background: limegreen;
			border-radius: 50%;
			border: 3px solid white;
		}
		.online3{
			position: absolute;
			//right: 0px;
			top: -7px;
			left: -10px;
			bottom: 0;
			width: 33px;
			height: 20px;
			//background: limegreen;
			border-radius: 50%;
		}
		
	}
</style>
